<template>
  <div class="b-hui">
    <!-- 顶部: -->
    <div class="header c-white">
      <van-cell title="联盟" size="large" class="header c-white" center>
        <van-icon slot="right-icon" name="share-o" class="c-white v-a-m" />
        <van-icon slot="right-icon" name="chat-o" class="c-white v-a-m" />
      </van-cell>
      <van-row class="p-t-5 p-b-5 header">
        <!-- 头像 -->
        <van-col class="m-l-4" span="23">
          <van-image
            round
            width="4rem"
            height="4rem"
            class="v-a-m f-l"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <span class="m-l-2 c-white f-s-17">星星</span>
          <br />
          <span class="m-l-1 zi-yang m-t-3">良辰军团</span>
          <span class="f-r m-r-1 f-s-13">
            <van-icon name="passed" class="v-a-m" />
            已实名
          </span>
        </van-col>
      </van-row>
    </div>
    <!-- 功能列 -->
    <van-grid class="" :border="false">
      <van-grid-item icon="user-o" class="c-blue1" text="邀请盟友" />
      <van-grid-item icon="orders-o" class="c-blue1" text="盟友通讯录" />
      <van-grid-item icon="shop-o" class="c-blue1" text="商户拓展" />
      <van-grid-item icon="balance-list-o" class="c-blue1" text="商户明细" />
      <van-grid-item icon="award-o" class="c-blue1" text="排行榜" />
      <van-grid-item icon="setting-o" class="c-blue1" text="商户管理" />
      <van-grid-item />
      <van-grid-item />
    </van-grid>
    <!-- 合作伙伴 -->
    <div
      class="m-t-2 p-t-3 p--b-3 b-white t-a-c c-hui ccc"
      style="position: relative;"
    >
      <img :src="require('./img/hez.png')" class="tu" />
      <p>本月合作伙伴拓展商户交易额（元）</p>
      <p class="f-s-31 m-t-2 m-b-2 c-o"><b>3520.45</b></p>
      <van-row class="">
        <van-col class="" span="12">
          <span>0</span>
          <p>今日新增直营盟友（人）</p>
        </van-col>
        <van-col class="" span="12">
          <span>0</span>
          <p>今日盟友激活商户（人）</p>
        </van-col>
      </van-row>
    </div>
    <!-- 商户 -->
    <div
      class="m-t-2 p-t-3 p--b-3 b-white t-a-c c-hui ccc"
      style="position: relative;"
    >
      <img :src="require('./img/s_h.png')" class="tu" />
      <p>本月合作伙伴拓展商户交易额（元）</p>
      <p class="f-s-31 m-t-2 m-b-2 c-o"><b>3520.45</b></p>
      <van-row>
        <van-col span="12">
          <span>0</span>
          <p>今日新增直营盟友（人）</p>
        </van-col>
        <van-col span="12">
          <span>0</span>
          <p>今日盟友激活商户（人）</p>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import './base.scss'

export default {}
</script>

<style lang="scss" scoped>
.ccc {
  font-size: 12px;
}
.tu {
  position: absolute;
  top: 0;
  left: 5px;
}
.header {
  background: linear-gradient(to right, rgb(48, 176, 255), rgb(52, 134, 249));
}
.user {
  background: #f6f8fb;
}
.van-cell__title {
  text-align: center;
}
.van-icon {
  font-size: 16px !important;
  padding: 0 3px;
}
.zi-yang {
  background: #139def;
  border-radius: 20px;
  line-height: 16px;
  padding: 1px 10px;
  font-size: 0.5rem;
  display: inline-block;
}
</style>
